<!-- 1 脚本 -->
<script lang='ts' setup name='Home'>
import { ref, reactive } from 'vue';
import NavMenu from '@/components/NavMenu.vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import TabContent from '@/components/TabContent.vue';

import { useUserInfoStore } from '@/stores/userInfo'


const store = useUserInfoStore()

const router = useRouter()


function logout() {
    ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }
    ).then(() => {
        router.replace("/login")
    })
}

</script>


<!-- 2 模板 -->
<!-- http://localhost/home -->

<template>

    <el-container class="app">
        <el-aside width="200px" class="aside">
            <div class="app_title">
                <div class="icon">
                    <img src="../assets/logo.png" />
                </div>
                <div class="title">东软云医院管理系统</div>
            </div>
            <!-- 使用菜单 -->
            <NavMenu></NavMenu>


        </el-aside>
        <el-container class="content">
            <el-header class="header">
                <div class=" floatleft">
                    <div class="breadcrumb">

                        <!-- 东软云医院管理系统 -->
                            <el-breadcrumb separator="#">
                                <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                                <el-breadcrumb-item :to="{ path: '/system/user' }">用户管理</el-breadcrumb-item>
                            </el-breadcrumb>
                    </div>
                   
                </div>
                <div class="profile floatright">
                    <span style="color:#000000;font-size: 16px;margin-right: 10px;">{{ store.username }}</span>

                    <el-button type="primary" plain round @click="logout">退出</el-button>
                </div>
            </el-header>

            <el-main class="main">
                <TabContent></TabContent>
            </el-main>
        </el-container>
    </el-container>

</template>


<!-- 3 样式 -->
<style scoped>
.app {
    height: 100vh;

    .app_title {
        color: white;
        display: flex;
        justify-content: space-evenly;

        margin: 20px 10px;

        .icon {
            width: 30px;

            img {
                width: 30px;
                height: 30px;
            }
        }


        .title {}
    }
}


.header {
    line-height: 60px;
    background: #FFFFFF;
    font-size: 25px;
    color: #FFFFFF;
    /* border-bottom: solid 0.2px grey; */
    box-shadow: inset 0px -2px 1px rgb(207, 207, 207);

    .breadcrumb {
        display: flex;
        align-items: center;
       
        height: 60px;

    }

}

.bottom {
    height: calc(100% - 60px);
}


.aside {
    background: #304156;
    height: 100%;
}

.main {
    margin:0;
    padding: 0;
    background: #FFFFFF;
}
</style>